<template>
    <view class="swiper-item">
        <view v-for="(ele, i) in applyInfo" :key="i" class="itemBox item1">
            <view class="first-line">
                <view class="left">
                    <view class="stock-name">{{ ele.stockName }}</view>
                    <view class="stock-code">{{ ele.stockCode }}</view>
                </view>
                <view class="right">
                    <!-- <image class="more" src="../../../static/icon/more-blue.png" mode="" /> -->
                    <view class="more">{{ ele.state == 3 ? "未開始" : ele.state == 1 ? "進行中" : "已結束" }}</view>
                </view>
            </view>
            <view class="second-line" @click="routerToMore(ele, ele.stockCodeParam)">
                <view class="view priceIncreaseMinus">
                    <view class="key">{{ $t('market.shengou.priceIncreaseMinus') }}</view>
                    <view class="value">{{ ele.priceIncreaseMinus }}%</view>
                </view>
                <view class="view priceMinus">
                    <view class="key">{{ $t('market.shengou.priceMinus') }}</view>
                    <view class="value">{{ ele.priceMinus }}</view>
                </view>
                <view class="view marketPrice">
                    <view class="key">{{ $t('market.shengou.marketPrice') }}</view>
                    <view class="value">{{ ele.marketPrice }}</view>
                </view>
                <view class="view total">
                    <view class="key">{{ $t('market.shengou.total') }}</view>
                    <view class="value">{{ `${ele.allNum} ${$t('information.profit.number')}` }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { requestApi } from '@/api';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { formateDate } from '@/utils/formatter';
import { Decimal } from 'decimal.js';
import { useStockStore } from '@/stores'

// routerToMore
function routerToMore(obj, code) {
    uni.navigateTo({
        url: `/pages/shengouDetail/shengou-detail?item=${JSON.stringify(obj)}&code=${JSON.stringify(code)}`
    })
}
/*
    "userId": 0,
    "stockCode": "6411.two",
    "stockName": "晶焱",
    "marketName": "上櫃增資",
    "applyTime": 1676390400000, 开始申购
    "applyEndTime": 1676563200000, 结束申购
    "drawTime": 1676908800000, 抽签时间
    "amtTime": 1677772800000, 发券
    "allNum": 425,  
    "applyPrice": 63,
    "marketPrice": 121,
    "profit": 57500, 收益
    "profitRate": 91, 
    "applyNum": 1, 单用户申购张数
    "applyPeople": 206866, 
    "winningRate": 0.21, 中签率
    "status": 0
*/
const applyInfo = ref([])
const store = useStockStore()
const unsubscribe = store.$onAction(({
    name,  //action 函数的名称
    store,  //store 实例，这里是 mainStore
    args, //action 函数参数数组
    after,  //钩子函数，在action函数执行完成返回或者resolves后执行
    onError // 钩子函数，在action函数报错或者rejects后执行
}) => {
    after(result => {
        if (name == 'addSortStock') {
            getApplyInfo()
        }
    })
})
// 新股申购列表
async function getApplyInfo() {
    const { status, data, code } = await requestApi.getApplyInfo()
    if (status == 0) {

        let applyInfoIng = []
        let applyInfoUn = []
        let applyInfoEnd = []

        data.map((item) => {
            let { stockCode, applyTime, applyEndTime, drawTime, amtTime, marketPrice, applyPrice } = item
            marketPrice = new Decimal(marketPrice)
            let priceMinus = marketPrice.minus(applyPrice)// 差价
            let priceIncreaseMinus = priceMinus.dividedBy(marketPrice)
            let priceIncreaseMinusRate = priceIncreaseMinus.toFixed(3)

            item.priceMinus = priceMinus
            item.priceIncreaseMinus = new Decimal(priceIncreaseMinusRate).times(100)  // 溢价差

            // 股票代码
            item.stockCodeParam = stockCode
            item.stockCode = stockCode.match(/^[^\.]+/)[0]
            // 日期
            const nowTime = new Date().getTime();
            if (nowTime >= applyTime && nowTime < applyEndTime) {
                item.state = 1 // 进行中
            } else if (nowTime >= applyEndTime && nowTime < amtTime) {
                item.state = 0
            } else if (nowTime < applyTime) {
                item.state = 3
            }
            else {
                item.state = 2
            }
            item.applyTime = formateDate(new Date(applyTime))
            item.applyEndTime = formateDate(new Date(applyEndTime))
            item.drawTime = formateDate(new Date(drawTime))
            item.amtTime = formateDate(new Date(amtTime))

            item.state == 1 && applyInfoIng.push(item)
            item.state == 3 && applyInfoUn.push(item)
            if (item.state == 0 && item.state == 2) {
                applyInfoEnd.push(item)
            }
            return item
        })
        applyInfo.value = [...applyInfoUn, ...applyInfoIng, ...applyInfoEnd]
    }

}
let timer = null
onUnload(() => {
    unsubscribe()
    clearInterval(timer)
})
onLoad(() => {
    timer = setInterval(() => {
        getApplyInfo()
    }, 6000)
})
</script>

<style lang="scss">
.swiper-item {
    color: #fff;

    .item1 {
        position: relative;
        background-color: #20212A;
        width: 670rpx;
        height: 230rpx;
        border-radius: 45rpx;
        margin: 32rpx auto 0rpx;
        padding-top: 15rpx;

        .first-line {
            display: flex;
            padding-left: 28rpx;
            padding-right: 44rpx;
            align-items: center;

            .left {
                display: flex;
                align-items: center;

                .stock-name {
                    font-size: 32rpx;
                }

                .stock-code {
                    font-size: 24rpx;
                    color: #7E8394;
                    margin-left: 8rpx;
                }
            }

            .right {
                margin-left: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .more {
                    // width: 57rpx;
                    height: 57rpx;
                    margin-bottom: 8rpx;
                }


            }
        }

        .second-line {
            margin-top: 30rpx;
            margin-left: 50rpx;
            margin-right: 68rpx;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            column-gap: 57rpx;
            row-gap: 10rpx;

            .view {
                display: flex;
                justify-content: space-between;

                .key {
                    color: #7E8394;
                    font-size: 20rpx;
                }


            }
        }
    }
}
</style>